import React from "react";
import {ActionSheet, Badge, Button, Card, Empty, Grid, List, Tabs, Tag, Toast} from 'antd-mobile'
import './MainPage.css'
import {Action} from "antd-mobile/es/components/modal";
import cookie from "_react-cookies@0.1.1@react-cookies";
import {assertInputSourceMap} from "@babel/core/lib/config/validation/option-assertions";


export default class CheckEntrust extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: "",
            showProxyCreated: false,
            showProxyAccepted: false,
            proxyCreated: [],
            proxyAccepted: [],
            messageNumber: 0,
            proxyCreatedActionSheetVisible: false,
            proxyAcceptedActionSheetVisible: false,
            proxyCreatedHasMore: true,
            proxyAcceptedHasMore: true,
            proxyCreatedStartMark: 1,
            proxyAcceptedStartMark: 1,
            deleteProxy:'',   //删除的委托编号id
            editProxtId:'',   //需要编辑的委托的id


        }
    }

    //获取新的我创建的委托列表
    getNewProxyCreatedList = () => {
        const newStartMark = this.state.proxyCreatedStartMark + 10;
        this.setState({proxyCreatedStartMark:newStartMark})
        const url = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxycreated?phone' + cookie.load("phone") + '&startMark=' + this.state.proxyCreatedStartMark+10;
        fetch(url, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            console.log(result)
            if (result["code"] == "200") {
                this.setState({proxyCreated: [...this.state.proxyCreated, ...result["message"]]})
            }
        })


        if (this.state.proxyCreated.length > 100) {
            this.setState({proxyCreatedHasMore: false})
        }
    }

    //获取新的我收到的委托列表
    getNewProxyAcceptedList = () => {
        const newStartMark = this.state.proxyCreatedStartMark + 10;
        this.setState({proxyCreatedStartMark:newStartMark})
        console.log("newMark",newStartMark)
        const url = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxyaccepted?phone=' + cookie.load("phone") + '&startMark=' + newStartMark;
        fetch(url, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            console.log(result)
            if (result["code"] == "200") {
                this.setState({proxyAccepted: [...this.state.proxyAccepted, ...result["message"]]})
            }
        })


        if (this.state.proxyAccepted.length > 100) {
            this.setState({proxyAcceptedHasMore: false})
        }
    }

    //获取我收到的委托的未处理的消息数量
    getNewProxyAcceptedNumber = () => {
        // const url = 'http://htjoa.nrnet.cn/dc14/construct/proxy/newproxy';
        // fetch(url, {
        //     method: "GET"
        // })
        //     .then(res => res.json()).then(result => {
        //     // console.log(result)
        //     if (result["code"] == "200") {
        //         const messageNumber = result["messageNumber"]
        //         if (messageNumber != 0) {
        //             this.setState({messageNumber: messageNumber})
        //         }
        //         // console.log(messageNumber)
        //     }
        // })


        const url3 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/newproxy?phone=' + cookie.load("phone");
        fetch(url3, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            if (result["code"] == "200") {
                const messageNumber = result["messageNumber"]
                if (messageNumber != 0) {
                    this.setState({messageNumber: result["messageNumber"]})
                }
            }
        })
    }

    componentDidMount() {
        this.setState({phone:cookie.load("phone")})
        console.log(this.state.phone)
        document.title = '查看委托'
        this.getNewProxyAcceptedNumber()

        //初始化我创建的委托列表
        const url = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxycreated?phone=' + cookie.load("phone") + '&startMark=' + this.state.proxyCreatedStartMark;
        fetch(url, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            console.log(result)
            if (result["code"] == "200") {
                this.setState({proxyCreated: result["message"]})
                this.setState({showProxyCreated: true})
            }
        })

        //初始化我收到的委托列表
        const url1 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxyaccepted?phone=' + cookie.load("phone") + '&startMark=' + this.state.proxyAcceptedStartMark;
        fetch(url1, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            console.log(result)
            if (result["code"] == "200") {
                this.setState({proxyAccepted: result["message"]})
                this.setState({showProxyAccepted: true})
            }
        })

        //初始化我的创建的委托总条数
        //初始化我的接受的委托总条数

    }


    // onClick = () => {
    //     this.setState({dataSelecterIsvsiable:['0']})
    //     console.log(this.state.dataSelecterIsvsiable)
    // }
    //
    // getData = () =>{
    //
    // }

    edit = (element) => {
        this.setState({proxyCreatedActionSheetVisible: true})
        this.setState({editProxtId:element})

        console.log("点击了创建委托的编辑", element)
       //  console.log(index)
    }
    edit1 = (element) => {
        this.setState({proxyAcceptedActionSheetVisible: true})
        this.setState({editProxtId:element})
        console.log("点击了收到委托的编辑", element)
        // console.log(index)
    }


    render() {

        const proxyCreatedActions: Action[] = [
            {text: '删除', key: 'delete', description: '删除后数据不可恢复', danger: true,},
            // { text: '修改', key: 'edit' },
            {text: '取消', key: 'out'},
        ]

        const proxyAcceptedActions: Action[] = [
            {text: '接受', key: 'accept'},
            {text: '拒绝', key: 'refuse', danger: true,},
            {text: '取消', key: 'out'},
        ]

        return (
            <div style={{background: "#1677ff", padding: '10px', height: "max-content"}}>
                <Card>
                    <Tabs>
                        <Tabs.Tab title='我创建的委托' key='fruits' style={{padding: '0px'}}>

                            {
                                this.state.showProxyCreated ? (
                                    <div>
                                        {/*<SearchBar*/}
                                        {/*    placeholder='按计划号查找'*/}
                                        {/*    showCancelButton*/}
                                        {/*    onSearch={val => {*/}
                                        {/*        Toast.show(`你搜索了：${val}`)*/}
                                        {/*    }}*/}
                                        {/*    onFocus={() => {*/}
                                        {/*        Toast.show('获得焦点')*/}
                                        {/*    }}*/}
                                        {/*    onBlur={() => {*/}
                                        {/*        Toast.show('失去焦点')*/}
                                        {/*    }}*/}
                                        {/*    onClear={() => {*/}
                                        {/*        Toast.show('清空内容')*/}
                                        {/*    }}*/}
                                        {/*    onCancel={() => {*/}
                                        {/*        Toast.show('取消搜索')*/}
                                        {/*    }}*/}
                                        {/*/>*/}
                                        <List>
                                            {
                                                this.state.proxyCreated.map((element, index) => {
                                                    console.log(index)
                                                    // console.log(element.length)
                                                    return (
                                                        <List.Item key={index} value={element} style={{padding: '0px'}}>
                                                            <Card style={{padding: '0px'}}
                                                                  title={
                                                                      <Grid columns={10} gap={8}
                                                                            style={{padding: '0px'}}>
                                                                          <Grid.Item span={8}>

                                                                              计划编号： {element["projectNumber"]}
                                                                          </Grid.Item>
                                                                          <Grid.Item>
                                                                              {
                                                                                  element["status"] === 0 ? (
                                                                                          <Tag color='default'
                                                                                               fill='outline'>未处理</Tag>)
                                                                                      : element["status"] === 1 ? (
                                                                                              <Tag color='success'
                                                                                                   fill='outline'>已接受</Tag>)
                                                                                          : (<Tag color='warning'
                                                                                                  fill='outline'>已拒绝</Tag>)
                                                                              }
                                                                          </Grid.Item>
                                                                      </Grid>
                                                                  }>
                                                                <Grid columns={5} gap={8} style={{padding: '0px'}}>
                                                                    <Grid.Item span={4}>
                                                                        <Grid columns={5} gap={8}
                                                                              style={{padding: '0px'}}>
                                                                            <Grid.Item span={5}>
                                                                                委托人： {element["entrustName"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                受托人： {element["entrustedName"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                委托开始日期： {element["startDate"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                委托结束日期： {element["endDate"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                委托原因： {element["reason"]}
                                                                            </Grid.Item>

                                                                        </Grid>
                                                                    </Grid.Item>

                                                                    {
                                                                        //TODO添加编辑按钮
                                                                        element["status"] === 0 ? (<Grid.Item
                                                                        onClick={(e) => this.edit(element["id"])}
                                                                        style={{
                                                                            color: "#1677ff",
                                                                            marginTop: "64px"
                                                                        }}>
                                                                        编辑
                                                                    </Grid.Item>) : null}


                                                                </Grid>


                                                            </Card>
                                                        </List.Item>)
                                                })
                                            }
                                        </List>
                                        {this.state.proxyCreatedHasMore ? (
                                                <Button onClick={this.getNewProxyCreatedList} block color='primary'
                                                        size='large'>加载更多</Button>)
                                            : (<Button block disabled>
                                                暂无更多
                                            </Button>)}
                                    </div>


                                ) : <Card>
                                    <Empty description='暂无委托'/>
                                </Card>
                            }

                        </Tabs.Tab>
                        <Tabs.Tab
                            title={
                                <Badge content={this.state.messageNumber} style={{'--right': '-10px', '--top': '8px'}}>
                                    我收到的委托
                                </Badge>
                            }
                            key='animals'
                        >
                            {
                                this.state.showProxyAccepted ? (
                                    <div>
                                        {/*<SearchBar*/}
                                        {/*    placeholder='按计划号查找'*/}
                                        {/*    showCancelButton*/}
                                        {/*    onSearch={val => {*/}
                                        {/*        Toast.show(`你搜索了：${val}`)*/}
                                        {/*    }}*/}
                                        {/*    onFocus={() => {*/}
                                        {/*        Toast.show('获得焦点')*/}
                                        {/*    }}*/}
                                        {/*    onBlur={() => {*/}
                                        {/*        Toast.show('失去焦点')*/}
                                        {/*    }}*/}
                                        {/*    onClear={() => {*/}
                                        {/*        Toast.show('清空内容')*/}
                                        {/*    }}*/}
                                        {/*    onCancel={() => {*/}
                                        {/*        Toast.show('取消搜索')*/}
                                        {/*    }}*/}
                                        {/*/>*/}
                                        <List>
                                            {
                                                this.state.proxyAccepted.map((element, index) => {
                                                    // console.log(element.length)
                                                    return (
                                                        <List.Item key={index} value={element} style={{padding: '0px'}}>
                                                            <Card style={{padding: '0px'}}
                                                                  title={
                                                                      <Grid columns={10} gap={8}
                                                                            style={{padding: '0px'}}>
                                                                          <Grid.Item span={8}>
                                                                              计划编号： {element["projectNumber"]}
                                                                          </Grid.Item>
                                                                          <Grid.Item>
                                                                              {
                                                                                  element["status"] === 0 ? (
                                                                                          <Tag color='default'
                                                                                               fill='outline'>未处理</Tag>)
                                                                                      : element["status"] === 1 ? (
                                                                                              <Tag color='success'
                                                                                                   fill='outline'>已接受</Tag>)
                                                                                          : (<Tag color='warning'
                                                                                                  fill='outline'>已拒绝</Tag>)
                                                                              }
                                                                          </Grid.Item>
                                                                      </Grid>
                                                                  }>
                                                                <Grid columns={5} gap={8} style={{padding: '0px'}}>
                                                                    <Grid.Item span={4}>
                                                                        <Grid columns={5} gap={8}
                                                                              style={{padding: '0px'}}>
                                                                            <Grid.Item span={5}>
                                                                                委托人： {element["entrustName"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                受托人： {element["entrustedName"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                委托开始日期： {element["startDate"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                委托结束日期： {element["endDate"]}
                                                                            </Grid.Item>
                                                                            <Grid.Item span={5}>
                                                                                委托原因： {element["reason"]}
                                                                            </Grid.Item>

                                                                        </Grid>
                                                                    </Grid.Item>
                                                                    {//TODO 编辑按钮
                                                                        element["status"] === 0 ?
                                                                        (<Grid.Item
                                                                            onClick={(e) => this.edit1(element["id"])}
                                                                            style={{
                                                                                color: "#1677ff",
                                                                                marginTop: "64px"
                                                                            }}>
                                                                            编辑
                                                                        </Grid.Item>) : null}

                                                                </Grid>


                                                            </Card>
                                                        </List.Item>)
                                                })
                                            }
                                        </List>
                                        {this.state.proxyAcceptedHasMore ? (
                                                <Button onClick={this.getNewProxyAcceptedList} block color='primary'
                                                        size='large'>加载更多</Button>)
                                            : (<Button block disabled>
                                                暂无更多
                                            </Button>)}
                                    </div>


                                ) : <Card>
                                    <Empty description='暂无委托'/>
                                </Card>
                            }

                        </Tabs.Tab>
                    </Tabs>
                </Card>


                <ActionSheet
                    closeOnAction={true}
                    visible={this.state.proxyCreatedActionSheetVisible}
                    actions={proxyCreatedActions}
                    onClose={() => this.setState({proxyCreatedActionSheetVisible: false})}
                    onAction={action => {
                        if (action.key === 'delete') {

                            const url1 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/deleteproxy?id='+this.state.editProxtId;
                            fetch(url1, {
                                method: "GET"
                            })
                                .then(res => res.json()).then(result => {
                                console.log(result)
                                if (result["code"] == "200") {



                                    this.setState({proxyCreatedStartMark:1})
                                    //初始化我创建的委托列表
                                    const url = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxycreated?phone=' + cookie.load("phone") + '&startMark=' + this.state.proxyCreatedStartMark;
                                    fetch(url, {
                                        method: "GET"
                                    })
                                        .then(res => res.json()).then(result => {
                                        console.log(result)
                                        if (result["code"] == "200") {
                                            this.setState({proxyCreated: result["message"]})
                                            this.setState({showProxyCreated: true})
                                        }
                                    })


                                    Toast.show('已删除')
                                }else {
                                    Toast.show('删除失败')
                                }
                            })


                            this.setState({bottonPopShow: false})
                        } else if (action.key === 'out') {
                            this.setState({bottonPopShow: false})
                        }
                    }}
                />


                <ActionSheet
                    closeOnAction={true}
                    visible={this.state.proxyAcceptedActionSheetVisible}
                    actions={proxyAcceptedActions}
                    onClose={() => this.setState({proxyAcceptedActionSheetVisible: false})}
                    onAction={action => {
                        if (action.key === 'accept') {



                            const url1 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/updateproxy?id='+this.state.editProxtId+'&status=1';
                            fetch(url1, {
                                method: "GET"
                            })
                                .then(res => res.json()).then(result => {
                                console.log(result)
                                if (result["code"] == "200") {
                                    this.setState({proxyAcceptedStartMark:1})
                                    //初始化我收到的委托列表
                                    const url1 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxyaccepted?phone=' + cookie.load("phone") + '&startMark=' + this.state.proxyAcceptedStartMark;
                                    fetch(url1, {
                                        method: "GET"
                                    })
                                        .then(res => res.json()).then(result => {
                                        console.log(result)
                                        if (result["code"] == "200") {
                                            this.setState({proxyAccepted: result["message"]})
                                            this.setState({showProxyAccepted: true})
                                        }
                                    })
                                    Toast.show('已接受')
                                }else {
                                    Toast.show('接受失败')
                                }
                            })


                            // this.setState({bottonPopShow: false})
                        } else if (action.key === 'refuse') {



                            const url1 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/updateproxy?id='+this.state.editProxtId+'&status=2';
                            fetch(url1, {
                                method: "GET"
                            })
                                .then(res => res.json()).then(result => {
                                console.log(result)
                                if (result["code"] == "200") {

                                    this.setState({proxyAcceptedStartMark:1})
                                    //初始化我收到的委托列表
                                    const url1 = 'http://htjoa.nrnet.cn/dc14/construct/proxy/proxyaccepted?phone=' + cookie.load("phone") + '&startMark=' + this.state.proxyAcceptedStartMark;
                                    fetch(url1, {
                                        method: "GET"
                                    })
                                        .then(res => res.json()).then(result => {
                                        console.log(result)
                                        if (result["code"] == "200") {
                                            this.setState({proxyAccepted: result["message"]})
                                            this.setState({showProxyAccepted: true})
                                        }
                                    })
                                    Toast.show('已拒绝')
                                }else {
                                    Toast.show('拒绝失败')
                                }
                            })



                            Toast.show(`点击了${action.text}`)
                            // this.setState({bottonPopShow: false})
                        }
                    }}
                />
            </div>
        )
    }
}